<%--
  Created by IntelliJ IDEA.
  User: a
  Date: 2024/8/15
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="com.jr.entry.Book" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>图书首页-搜索图书</title>
      <%
          String base = request.getContextPath()+"/";
          String url = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+base;
      %>
      <base href="<%=url%>">
      <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
      <script type="text/javascript">
        $(document).ready(function () {
            //1.窗体后，立刻发送异步请求，获得所有数据：
            $.get("book/queryByBook",function (ph) {
                    JSON.stringify(ph);
                    forBooks(ph.list);
                    showBut(ph);
            });

            //2.查询按钮，单击后，发送异步请求：
            $("[type='button']").click(function () {

                //获得下拉列表的value值：
                var index=$("select").val();
                var str=$("[name='qval']").val();
                $.get("book/queryByBook",{"query":index,"str":str},function (ph) {
                        JSON.stringify(ph);
                        forBooks(ph.list);
                        showBut(ph);
                });
            });
        });

          //为删除a标签，添加单击事件：
          $(document).on("click","a[title='删除']",function () {
              //发送异步请求：
              var id=$(this).attr("name");
              $.get("book/delete",{"bid":id},function (obj) {
                  JSON.stringify(obj);
                  alert(obj.mess);//获得响应文本里的， 删除结果的提示信息。
                  var books=obj.pageHelper.list;//获得响应文本里的， 最新的查询集合。
                  forBooks(books);
                  showBut(obj.pageHelper);
              });
          });

          //为修改a标签，添加单击事件：
          $(document).on("click","a[title!='删除']",function () {
              var bid=$(this).attr("name");
              window.location.href="http://127.0.0.1:8081/asd/updateBook.jsp?bid="+bid;
          });

          //集合循环遍历table的方法：
          function forBooks(books) {
              $("tbody").empty();
              for(var i=0;i<books.length;i++){
                  $("<tr>" +
                      "<td>"+books[i].bookName+"</td>" +
                      "<td>"+books[i].bookAuthor+"</td>" +
                      "<td>"+books[i].bookPublish+"</td>" +
                      "<td>"+books[i].bookPage+"</td>" +
                      "<td>"+books[i].bookPrice+"</td>" +
                      "<td><a name='"+books[i].bookId+"' title='删除' >删除</a><a name='"+books[i].bookId+"'>修改</a></td>" +
                      "</tr>").appendTo("tbody");
              }
          }

          //根据PageHelper对象，动态获得分页按钮： 首页 上一页 下一页 尾页
          function showBut(pageHelper) {
                $("div").empty();
                if(pageHelper.indexPage!=1){
                    $("<input type='button' value='首页' name='1' />").appendTo("div");
                    $("<input type='button' value='上一页' name='"+(pageHelper.indexPage-1)+"' />").appendTo("div");
                }

                if(pageHelper.indexPage!=pageHelper.countPage){
                    $("<input type='button' value='下一页' name='"+(pageHelper.indexPage+1)+"' />").appendTo("div");
                    $("<input type='button' value='尾页' name='"+pageHelper.countPage+"' />").appendTo("div");
                }
          }

          //为分页按钮，绑定单击事件：
          $(document).on("click","[type='button'][value!='查询']",function () {

              //获得下拉列表的value值：
              var index=$("select").val();
              var str=$("[name='qval']").val();
              var pageindex=$(this).attr("name");
              $.get("book/queryByBook",{"query":index,"str":str,"pageindex":pageindex},function (ph) {
                  JSON.stringify(ph);
                  forBooks(ph.list);
                  showBut(ph);
              });
          });

      </script>
  </head>
  <body>
        <select name="query">
            <option value="-1">请选择</option>
            <option value="1">书名</option>
            <option value="2">作者</option>
            <option value="3">出版社</option>
        </select>
        <input type="text" name="qval"/>
        <input type="button" value="查询">

        <a href="addBook.jsp">添加图书</a>

        <table>
            <thead>
                <tr>
                    <td>书名</td>
                    <td>作者</td>
                    <td>出版社</td>
                    <td>页数</td>
                    <td>价格</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

  <div>


  </div>


  </body>
</html>
